<template>
	<uni-transition mode-class="fade" :duration="200" :show="true">
		<view class="tab-bar">
			<view v-for="(item,index) in list" :key="index" class="tab-bar-item" @tap="switchTab(item,index)"
				:data-index='index'>
				<view class="center_part">
					<view class="center_part_code" v-if="index == 2">
						<image class=" center-has-noimg" :src="centerImg"></image>
					</view>
					<image v-else class="center-has-image"
						:src="tabInd === index ? item.selectedIconPath : item.iconPath"></image>
				</view>
				<view :style="{color: tabInd === index ? selectedColor : color}" class="cover-text">
					{{item.text}}
				</view>
				<view class="number" v-if="index == 3&&number>0">{{ number }}</view>
				<view class="newinfo" v-if="index == 4&&v_count>0"></view>
			</view>
		</view>
	</uni-transition>
</template>

<script>
	export default {
		data() {
			return {
				selectedIndex: uni.getStorageSync('selectedIndex') || 0,
				color: "#7A7E83",
				selectedColor: "#000",
				list: [{
						pagePath: "/pages/home/home",
						text: "首页",
						iconPath: "/static/tab/home-gray.png",
						selectedIconPath: "/static/tab/home-cur.png",
						number: "",
					},
					{
						pagePath: "/pages/company/company",
						text: "装修",
						iconPath: "/static/tab/dpzx.png",
						selectedIconPath: "/static/tab/dpzx-cur.png",
						number: "",
					},
					{
						pagePath: "/pages/xqlist/xqlist",
						text: "",
						iconPath: "/static/tab/fabu_cur.png",
						selectedIconPath: "/static/tab/fabu_cur.png",
						number: "",
					},
					{
						pagePath: "/pages/message/message",
						text: "消息",
						iconPath: "/static/tab/chat.png",
						selectedIconPath: "/static/tab/chat_cur.png",
						number: "",
					},

					{
						pagePath: "/pages/user/user",
						text: "我的",
						iconPath: "/static/tab/user.png",
						selectedIconPath: "/static/tab/user-cur.png",
						number: "",
					},
				],
				centerImg: "/static/tab/fabu_cur.png",
			};
		},
		props: {
			tabInd: {
				type: Number,
				default: 0
			},
			number: {
				type: Number,
				default: 0
			},
			v_count: {
				type: Number,
				default: 0
			}
		},
		methods: {
			switchTab(item, index) {
				let url = item.pagePath
				uni.switchTab({
					url: item.pagePath
				})
				this.list.forEach((v, i) => {
					if (item.pagePath === v.pagePath) {
						uni.setStorageSync('selectedIndex', index);
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	.tab-bar {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  /* height: 170rpx; */
	  display: flex;
	  padding-bottom: env(safe-area-inset-bottom);
	  z-index: 9999;
	  padding: 35rpx 0;
	  height: 180rpx;
	  background: url("https://keju123.oss-cn-shanghai.aliyuncs.com/xuqiu/m17281133010007133.png ")
	    no-repeat;
	  background-size: 100vw auto;
	  box-sizing: border-box;
	  /* background-color: #fff; */
	}
	
	.tab-bar-item {
	  flex: 1;
	  text-align: center;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-direction: column;
	}
	.tab-bar-item .cover-image {
	  width: 27px;
	  height: 27px;
	}
	
	.tab-bar-item .cover-text {
	  font-size: 10px;
	}
	.txt {
	  color: #aaaaaa;
	}
	.fontWeight {
	  font-weight: bold;
	}
	.bg_rec {
	  background: #ffd324;
	  width: 80rpx;
	  min-height: auto;
	  height: 20rpx;
	  margin-top: -28rpx;
	  vertical-align: text-bottom;
	  border-radius: 0;
	  z-index: -10;
	}
	.center_img {
	  width: 100rpx;
	  height: 100rpx;
	  transform: translate(-50%);
	  left: 50%;
	  bottom: 0;
	}
	.center-has-noimg {
	  width: 100%;
	  height: 100%;
	}
	.center-has-image {
	  width: 38rpx;
	  height: 38rpx;
	}
	
	.center_part_code {
	  /* padding: 15rpx; */
	  box-shadow: 0 0 0 #000;
	  /* width: 100rpx;
	    height: 100rpx; */
	  position: absolute;
	  top: 12rpx;
	  z-index: 10;
	  width: 102rpx;
	  height: 102rpx;
	  transform: translate(-50%);
	  left: 50%;
	  box-sizing: border-box;
	  border-radius: 50%;
	  background-color: #fbbd08;
	  display: flex;
	    justify-content: center;
	    align-items: center;
	    /* opacity: 0.7; */
	}
	.tab-bar-item:nth-child(3) > .cover-text {
	  position: absolute;
	  /* bottom: 4rpx; */
	  bottom: calc(-34rpx + env(safe-area-inset-bottom));
	}
	.number {
	  position: absolute;
	  font-size: 24rpx;
	  min-width: 40rpx;
	  min-height: 40rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  color: #fff;
	  padding: 4rpx;
	  line-height: 24rpx;
	  background-color: #fd6334;
	  border-radius: 50%;
	  transform: translate(26rpx, -40rpx);
	}
	.newinfo{
	  position: absolute;
	  min-width: 20rpx;
	  min-height: 20rpx;
	  background-color: #fd6334;
	  border-radius: 50%;
	  transform: translate(26rpx, -40rpx);
	}
	
	.safeArea {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  height: calc(6rpx + env(safe-area-inset-bottom-));
	  background-color: #fff;
	}
</style>
